<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>class继承</title>
  </head>
  <body>
    <script>
      /**
       * ES5构造函数继承
       */

      // 手机父类
      function Phone(brand, price) {
        this.brand = brand;
        this.price = price;
      }

      Phone.prototype.call = function () {
        console.log("我可以打电话");
      };

      // 智能手机子类
      function SmartPhone(brand, price, color, size) {
        Phone.call(this, brand, price);
        this.color = color;
        this.size = size;
      }

      // 得到父类原型上方法
      SmartPhone.prototype = new Phone();
      SmartPhone.prototype.constructor = SmartPhone;

      SmartPhone.prototype.sayHello = function () {
        console.log("你好");
      };

      const xiaomi = new SmartPhone("小米", 2000, "黄色", "15.6");
      console.log(xiaomi);

      class Phone1 {
        constructor(brand, price) {
          this.brand = brand;
          this.price = price;
        }

        call() {
          console.log("我可以打电话");
        }
      }

      class SmartPhone1 extends Phone1 {
        constructor(brand, price, color, size) {
          super(brand, price); // Phone1.call(this, brand, price)
          this.color = color;
          this.size = size;
        }

        phone() {
          console.log("我可以打电话");
        }

        playGame() {
          console.log("我可以玩游戏");
        }
      }

      const chuizi = new SmartPhone1("锤子", 1999, "红色", "14");
      console.log(chuizi);
    </script>
  </body>
</html>
